<template>
	<view class="joinin-rider">
		<view class="form">
			<u--form
				labelPosition="left"
				:model="formData"
				ref="uForm"
			>
				<u-form-item
					label="姓名"
					prop="riderName"
					class="form-item"
					labelWidth="300rpx"
				>
					<u--input
						v-model="formData.riderName"
						border="none"
						placeholder="请输入您的姓名"
						inputAlign="right"
					></u--input>
				</u-form-item>
				<u-form-item
					label="联系方式"
					prop="phone"
					class="form-item"
					labelWidth="300rpx"
				>
					<u--input
						type="number"
						v-model="formData.phone"
						border="none"
						placeholder="请输入您的手机号"
						inputAlign="right"
					></u--input>
				</u-form-item>
				<view class="">
					<u-form-item
						label="接单地区 ( 可多选 ) "
						prop="formData.area"
						class="form-item"
						labelWidth="300rpx"
					>
						<view @click="openAddress" style="display: flex; align-items: center; justify-content: flex-end;">
							<view v-if="address.length > 0">
								{{address.join(',')}}
							</view>
							<view style="display: flex;">
								<u-icon size="20" name="arrow-right"></u-icon>
							</view>
						</view>
					</u-form-item>
					<view style="font-size: 26rpx; color: #999; margin: 20rpx;">
						我们将会根据您所选的地区来派单
					</view>
				</view>
				<view class="">
					<u-form-item
						label="骑手类型"
						prop="formData.riderType"
						class="form-item"
						labelWidth="300rpx"
					>
					</u-form-item>
					<view class="rider-class">
						<view :style="formData.riderType == 1 ? 'background: #1984FC; color: #fff' : ''" class="rider-left" @click="riderHandle(1)">
							<view class="top" style="font-size: 26rpx;">
								全职专送
							</view>
							<view class="bottom" style="font-size: 26rpx;">
								海量订单-优先派单
							</view>
						</view>
						<view :style="formData.riderType == 2 ? 'background: #FFC40E; color: #fff' : ''" class="rider-right" @click="riderHandle(2)">
							<view class="top" style="font-size: 26rpx;">
								兼职众包
							</view>
							<view class="bottom" style="font-size: 26rpx;">
								自由时间-多劳多得
							</view>
						</view>
						<view :style="formData.riderType == 1 ? 'position: absolute; top: 6%; left: 40%;' : 'position: absolute; top: 6%; right: 5%;'">
							<img style="width: 50rpx; height: 50rpx;" src="../../static/img/checkbox.png" alt="">
						</view>
					</view>
				</view>
				<view class="">
					<u-form-item
						label="身份证"
						prop="cardNum"
						class="form-item"
						labelWidth="300rpx"
					>
						<u--input
							type="number"
							v-model="formData.cardNum"
							border="none"
							placeholder="请输入您的身份证号码"
							inputAlign="right"
						></u--input>
					</u-form-item>
					<view class="id-upload" style="display: flex; justify-content: space-between; background-color: #fff;">
						<u-upload
							:fileList="fileList1"
							@afterRead="afterRead"
							:previewFullImage="true"
							name="1"
							multiple
							:maxCount="1"
							accept="image"
						 @delete="deletePic"
							width="330rpx"
							height="210rpx"
						>
							<view style="margin-bottom: 20rpx; margin-left: 20rpx; font-size: 26rpx; width: 320rpx; border: 2rpx dashed #999; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 70rpx 0;">
								<view class="">
									身份证正面
								</view>
								<view class="">
									点击上传国徽面+
								</view>
							</view>
						</u-upload>
						<u-upload
							:fileList="fileList2"
							@afterRead="afterRead"
							:previewFullImage="true"
							name="2"
							multiple
							:maxCount="1"
							accept="image"
							@delete="deletePic"
							width="330rpx"
							height="210rpx"
						>
						<view style="margin-bottom: 20rpx; font-size: 26rpx; width: 330rpx; border: 2rpx dashed #999; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 70rpx 0;">
							<view class="">
								身份证背面
							</view>
							<view class="">
								点击上传人像面+
							</view>
						</view>
						</u-upload>
					</view>
				</view>
				<view class="">
					<u-form-item
						label="健康证"
						prop="healthyNum"
						class="form-item"
						labelWidth="300rpx"
					>
						<u--input
							type="number"
							v-model="formData.healthyNum"
							border="none"
							placeholder="请输入您的健康证编码"
							inputAlign="right"
						></u--input>
					</u-form-item>
					<view style="margin-bottom: 20rpx; background-color: #fff; margin: auto;">
						<u-upload
							:fileList="fileList3"
							@afterRead="afterRead"
							:previewFullImage="true"
							name="3"
							multiple
							:maxCount="1"
							accept="image"
							width="675rpx"
							height="400rpx"
							@delete="deletePic"
						>
						</u-upload>
					</view>
				</view>
			</u--form>
		</view>
		<view @click="submitHandle" style="background-color: #1C83FC;height: 70rpx; line-height: 70rpx; text-align: center; color: #fff;">
			提交
		</view>
		<yaor-address ref="show" @transmit="transmit"></yaor-address>
	</view>
</template>

<script>
	import { environment } from '@/config/environment.js'
	import { barRiderSave } from '@/api/user.js'
	export default{
		data() {
			return{
				resourcesUrl: environment.baseURL,
				formData: {
					riderName: '',
					phone: '',
					area: '',
					cardNum: '',
					healthyNum: '',
					riderType: 1,
					frontImg: '',
					behindImg: '',
					healthyImg: '',
				},
				fileList1: [],
				fileList2: [],
				fileList3: [],
				address: []
			}
		},
		methods: {
			openAddress() {
				this.$refs.show.open()
			},
			transmit(e) {
				let arr = []
				let address = []
				let str = e.allArr[0].name + '' + e.allArr[1].name
				arr = e.allArr.slice(2, e.allArr.length)
				arr.forEach(item => {
					address.push(str + item.name)
				})
				this.formData.area = address.join(',')
				this.address = e.names
			},
			riderHandle(i) {
				this.formData.riderType = i
			},
			// 删除图片
			deletePic(event) {
				if (event.name == 1) {
					this[`fileList${event.name}`].splice(event.index, 1)
					this.formData.frontImg = ''
				}
				if (event.name == 2) {
					this[`fileList${event.name}`].splice(event.index, 1)
					this.formData.behindImg = ''
				}
				if (event.name == 3) {
					this[`fileList${event.name}`].splice(event.index, 1)
					this.formData.healthyImg = ''
				}
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				uni.showLoading({
					mask: true,
					title: '上传中...',
				});
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, `fileList${event.name}`)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url, imglist) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.resourcesUrl + 'gscloud_biz/oss/upload_minio',
						filePath: url,
						name: 'file',
						header: {
							'Authorization': 'NjFlODBlMTIzMDVhNGMzMzliOThmN2Y0MTZmMWFkMzUxNzI0MDI4NjM0MDE2Mg=='
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
							if (imglist == "fileList1") {
								this.formData.frontImg = JSON.parse(res.data).data.dir + JSON.parse(res.data).data.fileName
							}
							if (imglist == "fileList2") {
								this.formData.behindImg = JSON.parse(res.data).data.dir + JSON.parse(res.data).data.fileName
							}
							if (imglist == "fileList3") {
								this.formData.healthyImg = JSON.parse(res.data).data.dir + JSON.parse(res.data).data.fileName
							}
							uni.hideLoading();
						}
					});
				})
			},
			submitHandle() {
				if (!this.formData.riderName) {
					uni.showToast({
						title: '请输入名称',
						icon: "none"
					});
					return;
				}
				if (!this.formData.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: "none"
					});
					return;
				}
				if (this.formData.phone.length != 11 || !(/^[1][3456789]\d{9}$/).test(this.formData.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: "none"
					});
					return;
				}
				if(!this.formData.area) {
					uni.showToast({
						title: "请选择地区",
						icon: "none"
					});
					return
				}
				if(!this.formData.cardNum) {
					uni.showToast({
						title: "请输入身份证号码",
						icon: "none"
					});
					return
				}
				if (this.formData.cardNum.length != 18 || !(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(this.formData.cardNum)) {
					uni.showToast({
						title: '请输入正确的身份证号码',
						icon: "none"
					});
					return;
				}
				if(!this.formData.frontImg) {
					uni.showToast({
						title: "请上传身份证正面照",
						icon: "none"
					});
					return
				}
				if(!this.formData.behindImg) {
					uni.showToast({
						title: "请上传身份证背面照",
						icon: "none"
					});
					return
				}
				if(!this.formData.healthyNum) {
					uni.showToast({
						title: "请输入健康证编码",
						icon: "none"
					});
					return
				}
				if(!this.formData.healthyImg) {
					uni.showToast({
						title: "请上传健康证",
						icon: "none"
					});
					return
				}
				this.formData.status = 0
				barRiderSave(this.formData).then(res => {
					uni.showToast({
						title: '保存成功',
						icon: "none",
						complete: () => {
								setTimeout(() => {
								uni.navigateTo({
									url: '/pages/login/index'
								})
							}, 1000);
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.joinin-rider{
		height: 97vh;
		padding: 20rpx;
		background-color: #F7F8FA;
		display: flex;
		flex-direction: column;
		/deep/.form{
			flex: 1;
			overflow: auto;
			flex-grow: grow;
			.u-form{
				.u-form-item{
					padding: 0rpx 20rpx;
					margin: 20rpx 0rpx 0rpx 0rpx;
					background-color: #fff;
				}
			}
			.u-upload__button{
				margin: auto;
				margin-bottom: 20rpx;
			}
		}
		.rider-class{
			padding: 0rpx 20rpx;
			background-color: #fff;
			display: flex;
			text-align: center;
			justify-content: space-between;
			position: relative;
			.rider-left{
				width: 48%;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				font-weight: bold;
				border: 2rpx solid #1984FC;
				background-color: rgba(25,132,252, 0.2);
			}
			.rider-right{
				width: 48%;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				font-weight: bold;
				border: 2rpx solid #FFC40E;
				background-color: rgba(255,196,14,0.2);
			}
		}
	}
</style>